<template>
  <div class="stock-content">
    <div class="sc-search" @click.self="resetSort">
      <div>
        <el-select
          v-model="sectorValue"
          clearable
          filterable
          placeholder="切换板块"
          @change="handleSectorChange"
          style="width: 200px; height: 40px"
        >
          <el-option
            v-for="item in sectorList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>

      <div>
        <el-select
          v-model="conceptValue"
          clearable
          filterable
          placeholder="切换概念"
          @change="handleConceptChange"
          style="width: 200px; height: 40px"
        >
          <el-option
            v-for="item in conceptList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div>
        <el-select
          v-model="buySell"
          clearable
          placeholder="切换高抛低吸"
          @change="handleBuySell"
          style="width: 200px; height: 40px"
        >
          <el-option label="吸" value="1" />
          <el-option label="抛" value="2" />
          <el-option label="震荡" value="3" />
        </el-select>
      </div>
    </div>
    <StockList
      :data="recommendations"
      :key="recommendations.length"
      v-if="recommendations.length > 0"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import StockList from '../components/StockList.vue';
import {
  sectorFilterHook,
  conceptFilterHook,
  buySellFilterHook
} from '../commonHooks/index.js';
import { stockStore } from '@/store/stock';
const store = stockStore();
const recommendations = computed(() => store.recommendations);

const sectorList = computed(() => store.sectorList);
const conceptList = computed(() => store.conceptList);

const { sectorValue, handleSectorChange } = sectorFilterHook();
const { conceptValue, handleConceptChange } = conceptFilterHook();
const { buySell, handleBuySell } = buySellFilterHook();

const resetSort = () => {
  store.updateSort(false);
};
</script>

<style lang="scss" scoped>
.stock-content {
  height: 100%;
  .sc-search {
    color: #f56c6c;
    font-size: 18px;
    display: flex;
    justify-content: center;
    > div {
      margin: 0 10px;
    }
  }
}
</style>
